﻿
@{
    Layout = "_Layout - 复制";
}

<!DOCTYPE html>
<html>
<head>
    <title>村落导览</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #map {
            height: 93%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 7%;
        }

    
    </style>
</head>
<body>
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria - labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">路线详情</h4>
                </div>
                
                <div class="modal-body" id="modalContent"></div>

                <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                    </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-top">
        <span class="navbar-brand" style="padding-left:0;padding-right:0">
            <span class="glyphicon glyphicon-map-marker"></span><span></span><span></span>
        </span>
        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="btn btn-default navbar-toggle" style="padding-bottom:5.5px;padding-top:5.5px">
                更变位置
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav" style="float:right">
                <li><a>更变位置</a></li>
                <li><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU3MDUyMDM5Nw==&scene=126&bizpsid=0#wechat_redirect">古栖的诉说</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="AIChat">AI小鹿</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Recommend3">村落推荐</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="VillageGuider">村落导览</a></li>
            </ul>
        </div>
    </nav>
    <div id="map"></div>
    <div class="footer">
        <div class="list-group-item active" style="">
            <a class="btn btn-primary" role="button" style="width:45%;margin-right:5%" onclick=" $('#mymodal').modal();"><span class="glyphicon glyphicon-list"></span> 路线详情</a>
            <a style="width:45%" class="btn btn-primary" role="button" onclick="nowPosition();"><span class="glyphicon glyphicon-flag"></span> 开始导航</a> 
        </div>
    </div>
</body>
</html>
<script>
    var map,infoWindow;
    //var flightPlanCoordinates = [
    //    { "lat": 19.294005, "lng": 109.525726 },
    //    { "lat": 19.295305, "lng": 109.525122 },
    //    { "lat": 19.295469, "lng": 109.524929 },
    //    { "lat": 19.296050, "lng": 109.524810 },
    //    { "lat": 19.296844, "lng": 109.524485 },
    //    { "lat": 19.297355, "lng": 109.524506 },
    //    { "lat": 19.297396, "lng": 109.524023 },
    //    { "lat": 19.298221, "lng": 109.524018 },
    //    { "lat": 19.298647, "lng": 109.523755 },
    //    { "lat": 19.298789, "lng": 109.524064 },
    //    { "lat": 19.298302, "lng": 109.524353 },
    //    { "lat": 19.297976, "lng": 109.524795 },
    //];
    var flightPlanCoordinates =@ViewData["jsonStr"]
    function arrayAppend() {
        for (var i = 0; i < flightPlanCoordinates.length; i++) {
            $("#modalContent").append("<p>坐标" + i + "：(" + flightPlanCoordinates[i].lat + "," + flightPlanCoordinates[i].lng + ")</p>")
        }
        $("#modalContent").append("\n导航功能加急开发中")
        }
    arrayAppend()
    function initMap() {
        // var uluru = { lat: 26.089206, lng: 119.368482 };
        //var starP = { lat:19.294005,lng:109.525726};
        //var uluru = { lat: 19.298221, lng: 109.524018 }
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18, // use a smaller zoom level and rotation may not work
            mapTypeId: 'satellite', // use TERRAIN or ROADMAP and rotation will not work
            center: @ViewData["starPoint"]
        });
      
        var emarker = new google.maps.Marker({ position:@ViewData["endPoint"] map: map, label: "终点位置" });
        var smarker = new google.maps.Marker({ position:@ViewData["starPoint"] map: map, label: "起点位置" });
  
        
        var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.9,
            strokeWeight: 2.5
        });

        flightPath.setMap(map);
        infoWindow = new google.maps.InfoWindow;
        arrayAppend();
    }
   
    
        function nowPosition() {
        //// Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                infoWindow.setPosition(pos);
                infoWindow.setContent('你的位置');
                infoWindow.open(map);
                map.setCenter(pos);
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }
    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Error: The Geolocation service failed.' :
            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
        map.data.loadGeoJson('map.json');
    }
</script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyAJY36og3T58rud04-oX_No9AUZv_cfrc8&callback=initMap" async defer></script>
@*<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAcO8m4Q-T4mNgta2jHdL_Oap6bUDCXbAI&callback=initMap" async defer></script>*@